<script setup lang="ts" name="subSystem">
import { defineAsyncComponent, onMounted, reactive, ref, toRefs } from "vue";
import { deleteById, getSubSystemList } from "@/api/portal/subSystem";
import { notify } from "@/utils/element";
import { SysPostQuery, SysPostType } from "@/types/system";
const MenuEdit = defineAsyncComponent(
  () => import("@/views/portal/subSystem/components/subSystem-edit.vue")
);
// left 内容开始
interface Tree {
  // 定义树形结构
  id: string;
  label: string;
  children?: Tree[]; // 子节点
}

onMounted(() => {
  getPostData();
});

async function getPostData() {
  const { data } = await getSubSystemList();

  state.tableList = data;
  console.log("tableList", state.tableList);
}

//点击查询
function handleQuery() {
  //将页码设置为第一页
  state.page.pageNum = 1;
  getPostData();
}

// right 内容开始
const state = reactive({
  loading: false,
  page: {
    pageNum: 1,
    pageSize: 20,
    total: 0,
  } as PageType,
  query: {
    name: "",
  } as unknown as SysPostQuery,
  dataTree: [],
  tableList: [] as SysPostType[],
});

function handleAdd() {
  editRef.value.open("add", "新增");
}
function handleEdit(row: SysPostQuery) {
  //console.log('handleEdit', row)
  editRef.value.open("edit", "编辑", row);
}
async function handleDelete(id: string) {
  console.log("handleDelete", id);
  try {
    state.loading = true;
    await deleteById(id);
    //提示成功
    notify("删除成功！", { type: "success" });
    //刷新列表
    getPostData();
  } catch (error) {
  } finally {
    state.loading = false;
  }
}
const { loading, page, query, tableList } = { ...toRefs(state) };
const tableListRef = ref();
const editRef = ref();
</script>

<template>
  <div class="layout-padding">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="always">
          <el-form inline :model="query">
            <el-form-item label="应用名称">
              <el-input
                v-model="query.name"
                maxlength="30"
                placeholder="请输入应用名称"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button @click="handleQuery()" icon="ele-Search" type="primary"
                >查询</el-button
              >
              <el-button @click="handleAdd()" icon="ele-Plus" type="success"
                >新增应用</el-button
              >
            </el-form-item>
          </el-form>

          <el-table
            class="w100"
            ref="tableListRef"
            v-loading="loading"
            :data="tableList"
            row-key="menuId"
            border
            stripe
          >
            <el-table-column
            prop="sortNo"
              label="排序"
              align="center"
              width="100px"
            />
            <el-table-column
              prop="title"
              label="应用名称"
              header-align="center"
              align="center"
            >
              <template #default="{ row }">
                <span class="ml10">{{ row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="systemTypeName"
              label="应用类型"
              header-align="center"
              align="center"
            >
              <template #default="{ row }">
                <span class="ml10">{{ row.systemTypeName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="iconLarge"
              label="应用Icon"
              align="center"
            ></el-table-column>
            <el-table-column prop="type" label="状态" align="center">
              <template #default="{ row }">
                <el-tag
                  effect="plain"
                  :type="row.status == '0' ? 'primary' : 'warning'"
                  >{{ row.status == "0" ? "正常" : "停用" }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="description"
              label="描述"
              header-align="center"
              align="center"
              show-overflow-tooltip
            />

            <el-table-column label="操作" align="center" width="240px">
              <template #default="{ row }">
                <el-button
                  @click.stop="handleEdit(row)"
                  icon="ele-Edit"
                  type="warning"
                  link
                  >修改</el-button
                >
                <el-popconfirm
                  @confirm="handleDelete(row.id)"
                  width="auto"
                  :title="`确定永久删除【${row.title}】吗?`"
                >
                  <template #reference>
                    <el-button @click.stop icon="ele-Delete" type="danger" link
                      >删除</el-button
                    >
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <!-- 新增、编辑弹出组件 -->
    <MenuEdit ref="editRef" @refresh="getPostData" />
  </div>
</template>

<style scoped>
</style>
